<template>
  <div class="containerCurr">
    <Breadcrumb :items="['数模管理', '资产管理']" />
    <a-space direction="vertical" :size="16" style="display: block">
      <a-row class="grid-demo" :gutter="[12, 12]">
        <a-col
          :span="8"
          v-for="(item, index) in list"
          :key="index"
          @click="onNav(item.page)"
        >
          <div class="item">
            <img :src="item.icon" />
            <div>{{ item.name }}</div>
          </div>
        </a-col>
      </a-row>
    </a-space>
  </div>
</template>

<script lang="ts" setup>
  import { ref, IframeHTMLAttributes } from 'vue';
  import { useRouter } from 'vue-router';

  const visible = ref(true);
  const frameRef = ref<IframeHTMLAttributes>();
  const router = useRouter();

  const list = [
    {
      name: '3D预览',
      icon: '/icon/3D预览.png',
      page: '/basic3dviewer/index.html',
    },
    {
      name: '剖面图',
      icon: '/icon/剖面图.png',
      page: '/sectioning/index.html',
    },
    {
      name: '爆炸图',
      icon: '/icon/爆炸图.png',
      page: '/exploder/index.html',
    },
    {
      name: '元数据',
      icon: '/icon/资源器.png',
      page: '/modelexplorer/index.html',
    },
    {
      name: '结构树',
      icon: '/icon/结构树.png',
      page: '/treeview/index.html',
    },
    {
      name: 'PMI',
      icon: '/icon/PM.png',
      page: '/pmiviewer/index.html',
    },
    {
      name: '测量',
      icon: '/icon/测量.png',
      page: '/measurements/index.html',
    },
    {
      name: '识别',
      icon: '/icon/选择.png',
      page: '/selectionhandling/index.html',
    },
    {
      name: '备注',
      icon: '/icon/备注.png',
      page: '/notes/index.html',
    },
    /*{
      name: 'threeJs浏览',
      icon: '/threejsviewer/threejsviewer.png',
      page: '/threejsviewer/index.html',
    },
    {
      name: 'reactJs浏览',
      icon: '/reactjsviewer/reactjsviewer.png',
      page: '/reactjsviewer/index.html',
    },*/
  ];

  function onNav(page: string) {
    // frameRef.value!.src = url;
    router.push({
      path: '/view/model',
      query: {
        page,
        mode: 'local',
      }, // 本地预览模式
    });
  }
</script>

<style scoped lang="less">
  .containerCurr {
    padding: 10px;
    width: 100%;
    height: 100%;
    position: relative;
    flex-direction: column;
    box-sizing: border-box;
    flex-wrap: wrap;
  }
  .wrapper {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: 1;
    transition: all 0.2s;
  }

  .arrow {
    cursor: pointer;
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
  }
  .item {
    width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    padding: 20px;
    height: 13.3vw;
    min-height: 240px;
    cursor: pointer;
    transition: all 0.2s;

    &:hover {
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    }

    width: auto;

    img {
      height: 200px;
    }
    div {
      font-size: 18px;
    }
  }
</style>
